<div class="row">
    <div class="col-md-3">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="panel-title">
                    Manage
                </div>
            </div>
            <div class="list-group">
                <a
                        class="list-group-item clickable"
                        ng-class="{'active' : sections[activeSection].name == section.name }"
                        data-ng-click="showSection($index)"
                        data-ng-repeat="section in sections">
                    <i class="mdi {{section.icon}}"></i>
                    {{section.name}}
                </a>
            </div>
        </div>
    </div>
    <div class="col-md-9">
        <div class="row" ng-show="!upstream && loading">
            <div class="col-md-12 text-center margin padding">
                <h4>Loading data...</h4>
                <br>
                <div class="anim-loader">
                    <span class="dot dot_1"></span>
                    <span class="dot dot_2"></span>
                    <span class="dot dot_3"></span>
                    <span class="dot dot_4"></span>
                </div>
            </div>
        </div>
        <div ng-if="upstream" data-ui-view="details" ng-show="activeSection == 0"></div>
        <div ng-if="upstream" data-ui-view="targets" ng-show="activeSection == 1"></div>
    </div>
</div>


